import React from "react";
import FormItem from "./FormItem";
import { Modal } from "antd";
import { WeaLocaleProvider } from 'ecCom';
import { inject, observer } from "mobx-react";
import "./index.less";

const { getLabel } = WeaLocaleProvider;

@inject('edcFormDesignerStore')
@observer
export default class FieldView extends React.Component {
  constructor(props) {
    super();

    const { componentStore } = props.edcFormDesignerStore;

    this.store = componentStore;
    this.onRemove = this.onRemove.bind(this);
  }

  onRemove(e) {
    const { field } = this.props;
    const { onRemove } = this.store;

    if (field.existData){
      Modal.confirm({
        title: getLabel(504074, '删除插件'),
        content: <span>
          {getLabel(504078, '此字段已经有用户提交了数据，若删除该字段，')}
          <span style={{color:'#f5222d'}}>{getLabel(504079, '其对应的数据也会被清除，并无法恢复')}</span>。
          <br />
          {getLabel(504080, '你确定要删除吗？')}
        </span>,
        onOk: () => {
          onRemove(field);
        }
      });
    }else{
      onRemove(field);
    }
    e.stopPropagation();
  }

  render() {
    const { field, onClick } = this.props;
    const { currCom, onDragHover, onDrop, onDragEnd } = this.store;

    return (
      <div className='wea-edc-fb-com'>
        <FormItem
          field={field}
          onDrop={onDrop}
          onDragEnd={onDragEnd}
          onDragHover={onDragHover}
          onClick={onClick}
          selected={currCom && currCom.uuid === field.uuid}
        />
        <div className='action-btns'>
          <a className='f-btn-del' onClick={this.onRemove}></a>
        </div>
      </div>

    );
  }
}

FieldView.defaultProps = {
  field: {},
  onClick: () => { }
}